<template>
  <!-- 财务管理 begin -->
  <div class="main" id="main_finance_manager">
    <div class="main-hd">
      <h2>{{$t('m.cáiwùduìzhàng')}}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap" id="VuePayment_content">
        <div class="items">
          <div class="label">{{$t('m.pst')}}</div>
          <DatePicker type="daterange" format="yyyy-MM-dd" :value="TimeDefault" :options="disDate" @on-change="timeChange" :placeholder="$t('m.pst')" style="width: 200px" class="mr10"></DatePicker>
        </div>
        <div style="margin:20px 0;">
          <Button class="parameter_button" style="margin-right:30px;" @click="recycleQuery()">{{$t('m.recycle')}}</Button>
          <Button class="parameter_button" type="primary" @click="queryData">{{$t('m.cháxún')}}</Button>
          <Button type="primary" @click="exportData" style="float: right">
            <Icon type="ios-download-outline"></Icon> {{$t('m.dǎochūshùjù')}}
          </Button>
        </div>
        <Row class="finance_header">
          <Col span="8">
          <a class="tab" :class="{'tab-active': tabIndex === 1}" @click="handleTab(1)" href="javascript:;">
            <p>{{$t('m.běnqífàngkuǎn')}}</p>
          </a>
          <div class="headerDiv">
            <p>{{$t('m.contractM')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.loanAmount)}}</p>
            <p>{{$t('m.shíjìdǎkuǎnjīné')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.payAmount)}}</p>
          </div>
          </Col>
          <Col span="8">
          <a class="tab" :class="{'tab-active': tabIndex === 2}" @click="handleTab(2)" href="javascript:;">
            <p>{{$t('m.běnqíshōukuǎn')}}</p>
          </a>
          <div class="headerDiv">
            <Col style="text-align: center;">
            <p>{{$t('m.yīngshōuhétóngjīné')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.currentLoanAmount)}}</p>
            <p>{{$t('m.yīngshōulìxí')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.interest)}}</p>
            <p>{{$t('m.yīngshōufáxī')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.interestFine) }}</p>
            <p>{{$t('m.shíjìshōukuǎnzǒngé')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.repaidAmount)}}</p>
            </Col>
          </div>
          </Col>
          <Col span="8">
          <a class="tab" :class="{'tab-active': tabIndex === 3}" @click="handleTab(3)" href="javascript:;">
            <p>{{$t('m.qímòzàidài')}}</p>
          </a>
          <div class="headerDiv">
            <p>{{$t('m.yīngshōuhétóngjīné')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.beforeLoanAmount) }}</p>
            <p>{{$t('m.yīngshōufáxī')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.beforeInterestFine) }}</p>
            <p>{{$t('m.yīngshōuzǒngjì')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.beforeCount) }}</p>
            <p>{{$t('m.rLm')}}：{{currentType }}{{formatTreeMount(financeManagerCollectData.beforeRepaidAmount)}}</p>
          </div>
          </Col>
        </Row>
        <div class="list">
          <Table border :columns="financeManagerDetailTable" :loading="financeManagerDetailLoading" :data="financeManagerDetailData"></Table>

          <div style="float: right;margin-top:20px;text-align: right;">
            <Page class="pagebox" :total="financeManagerPageSum" :current.sync="financeManagerPageNumber" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;"></Page>
            <span class="pageSum">{{$t('m.shíjìhuánkuǎnjīné')}}{{$t('m.zǒngshù')}}：{{financeManagerRepaidAmount}}{{$t('m.yuán')}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { formatTreeMount } from "@/libs/util";
import excel from '@/static/excel'
export default {
  data () {
    return {
      financeManagerDetailLoading: true,
      financeManagerCollectData: [],
      financeManagerDetailData: [],
      financeManagerPageNumber: 1,
      financeManagerPageSize: 10,
      financeManagerType: 1,
      financeManagerPageSum: 0,
      financeManagerRepaidAmount: "",
      tabIndex: 1,
      TimeDefault: [],
      currentType:'',
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      financeManagerDetailTable: [
        {
          title: this.$t('m.rLt'),
          key: 'payTime',
          sortable: true
        },
        {
          title: this.$t('m.sptime'),
          key: 'dueDate',
          sortable: true
        },
        {
          title: this.$t('m.fàngkuǎnbiānhào'),
          key: 'payNum'
        },
        {
          title: this.$t('m.huánkuǎndānhào'),
          key: 'orderRepayGid'
        },
        {
          title: this.$t('m.dìngdānbiānhào'),
          key: 'orderGid',
        },
        {
          title: this.$t('m.xingming'),
          key: 'fullName'
        },
        {
          title: this.$t('m.běnjīn'),
          key: 'loanAmount',
          sortable: true,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t('m.Interest'),
          key: 'interest',
          sortable: true,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.interest));
          }
        },
        {
          title: this.$t('m.InterestPenalties'),
          key: 'interestFree',
          sortable: true,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.interestFree));
          }
        },
        {
          title: this.$t('m.overdueDay'),
          key: 'overDueDays',
          sortable: true
        },
        {
          title: this.$t('m.yīngháizǒngé'),
          key: 'shouldRepayAmount',
          sortable: true,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.shouldRepayAmount));
          }
        },
        {
          title: this.$t('m.shíjìhuánkuǎnjīné'),
          key: 'payAmount',
          sortable: true,
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.payAmount));
          }
        }
      ]
    }
  },
  methods: {
    recycleQuery () {
      this.TimeDefault = []
      this.financeManagerTimeStart = '';
      this.financeManagerTimeEnd = '';
      this.queryData()
    },
    queryData () {
      this.financeManagerCollectQuery()
      this.financeManagerDetailQuery()
    },
    financeManagerCollectQuery () {
      let param = {},
        query = '';
      param.applyDateBegin = this.financeManagerTimeStart,
        param.applyDateEnd = this.financeManagerTimeEnd,
        param.pageNumber = this.financeManagerPageNumber,
        param.pageSize = this.financeManagerPageSize,
        Object.keys(param).forEach((item, index) => {
          if (param[item]) {
            query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
          }
        });
      var url = `/api/laocai/finance/check/current?${query}`
      this.$http.get(url).then((res) => {

        if (res.body.code == 0) {
          this.financeManagerCollectData = res.body.result
          setTimeout(() => {

          }, 500);
          return
        }
      });
    },
    financeManagerDetailQuery () {
      this.financeManagerDetailLoading = true
      let param = {}, query = '';
      param.applyDateBegin = this.financeManagerTimeStart,
        param.applyDateEnd = this.financeManagerTimeEnd,
        param.pageNumber = this.financeManagerPageNumber,
        param.pageSize = this.financeManagerPageSize,
        param.type = this.financeManagerType
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/finance/check/stat?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.financeManagerDetailData = res.body.result.orderStatisticsVOs.list
          // this.financeManagerPageSize = res.body.result.orderStatisticsVOs.size
          this.financeManagerPageSum = res.body.result.orderStatisticsVOs.size
          this.financeManagerRepaidAmount = res.body.result.repaidAmount
          setTimeout(() => {
            this.financeManagerDetailLoading = false
          }, 500);
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
    handleTab (index) {
      if (this.tabIndex == index) return;
      this.tabIndex = index;
      this.financeManagerType = index
      this.financeManagerPageNumber = 1;
      this.financeManagerDetailQuery();
    },
    timeChange (e) {
      if (!e[0]) {
        this.financeManagerTimeStart = '';
        this.financeManagerTimeEnd = '';
      } else {
        this.financeManagerTimeStart = e[0];
        this.financeManagerTimeEnd = e[1];
      }
      this.financeManagerPageNumber = 1;
    },
    pageChange (e) {
      this.financeManagerPageNumber = e;
      this.financeManagerDetailQuery();
    },
    // 每页条数
    handleSizeChange (val) {
      debugger
      this.financeManagerPageSize = val;
      this.financeManagerDetailQuery();
    },
    // 导出数据
    exportData (type) {
      let APSexcel = []
      APSexcel[0] = {
        'payTime': this.$t('m.tǒngjì'),
        'dueDate': '',
        'payNum': '',
        'orderRepayGid': '',
        'orderGid': '',
        'fullName': '',
        'loanAmount': '',
        'interest': '',
        'interestFree': '',
        'overDueDays': '',
        'shouldRepayAmount': '',
        'payAmount': '',
      }
      APSexcel[1] = {
        'payTime': this.$t('m.time'),
        'dueDate': this.$t('m.contractM'),
        'payNum': this.$t('m.shíjìdǎkuǎnjīné'),
        'orderRepayGid': this.$t('m.yīngshōuhétóngjīné'),
        'orderGid': this.$t('m.yīngshōulìxí'),
        'fullName': this.$t('m.yīngshōufáxī'),
        'loanAmount': this.$t('m.shíjìshōukuǎnzǒngé'),
        'interest': this.$t('m.yīngshōuhétóngjīné'),
        'interestFree': this.$t('m.yīngshōufáxī'),
        'overDueDays': this.$t('m.yīngshōuzǒngjì'),
        'shouldRepayAmount': this.$t('m.rLm'),
        'payAmount': this.$t('m.shíjìhuánkuǎnjīné') + this.$t('m.zǒngshù')
      }
      APSexcel[2] = {
        'payTime': this.financeManagerTimeStart + '~' + this.financeManagerTimeEnd,
        'dueDate': this.financeManagerCollectData.loanAmount,
        'payNum': this.financeManagerCollectData.payAmount,
        'orderRepayGid': this.financeManagerCollectData.currentLoanAmount,
        'orderGid': this.financeManagerCollectData.interest,
        'fullName': this.financeManagerCollectData.interestFine,
        'loanAmount': this.financeManagerCollectData.repaidAmount,
        'interest': this.financeManagerCollectData.beforeLoanAmount,
        'interestFree': this.financeManagerCollectData.beforeInterestFine,
        'overDueDays': this.financeManagerCollectData.beforeCount,
        'shouldRepayAmount': this.financeManagerCollectData.beforeRepaidAmount,
        'payAmount': this.financeManagerPageSum
      }
      if (this.financeManagerDetailData.length) {
        const params = {
          title: [
            this.$t('m.rLt'),
            this.$t('m.sptime'),
            this.$t('m.fàngkuǎnbiānhào'),
            this.$t('m.huánkuǎndānhào'),
            this.$t('m.dìngdānbiānhào'),
            this.$t('m.xingming'),
            this.$t('m.běnjīn'),
            this.$t('m.Interest'),
            this.$t('m.InterestPenalties'),
            this.$t('m.overdueDay'),
            this.$t('m.yīngháizǒngé'),
            this.$t('m.shíjìhuánkuǎnjīné'),
          ],
          key: [
            'payTime',
            'dueDate',
            'payNum',
            'orderRepayGid',
            'orderGid',
            'fullName',
            'loanAmount',
            'interest',
            'interestFree',
            'overDueDays',
            'shouldRepayAmount',
            'payAmount',
          ],
          data: [...this.financeManagerDetailData, ...APSexcel],
          autoWidth: true,
          filename: this.$t('m.cáiwùduìzhàng')
        }
        excel.export_array_to_excel(params)

      } else {
        this.$Message.info(this.$t('m.biǎogéshùjùbùnéngwéikōng'))
      }
    },
  },
  computed: {
  },
  watch: {},
  filters: {},
  mounted () {
    this.currentType = localStorage.getItem('x-currentType')
    this.queryData()
  }
}
</script>

<style lang="scss">
@import "../static/style.css";
@import "../static/common.scss";

.items {
  display: inline-block;
  // margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.pop-info {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.pop-table table {
  border: 0;
  line-height: 24px;
}

.finance_header {
  text-align: center;
  display: flex;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 13px;
  border: 1px solid #e8eaec;
}

.finance_header .tab {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  color: #515a6e;
  text-decoration: none;
}

.finance_header .tab:after {
  content: "";
  display: block;
  height: 3px;
  background: #666;
  width: 20%;
  margin: 0 auto;
}

.finance_header .tab-active:after {
  content: "";
  display: block;
  height: 3px;
  background: #2c8cf0;
  width: 20%;
  margin: 0 auto;
}
.finance_header .tab-active p {
  font-weight: 700;
  color: #2c8cf0;
}

.finance_header > .ivu-col {
  padding: 15px 0;
  border-right: 1px solid #e8eaec;
}

.finance_header .headerDiv {
  line-height: 26px;
}
.pageSum {
  float: right;
  height: 40px;
  line-height: 40px;
  margin-right: 30px;
  margin-top: 10px;
}
.pagebox {
  float: right;
}
</style>